<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<meta charset="UTF-8" />
	<title>VAOI || Colección</title>
	<meta
		content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
		name='viewport' />

</h:head>

<h:body class="skin-green">
	<ui:composition template="/USER/menuUser.xhtml">
		<ui:define name="body">
			<f:view>

	<!-- Site wrapper -->
	<div  style="min-height:100%">
	
			
				<p:ajaxStatus onstart="$('#progressBar').modal('show');"
					onsuccess="$('#progressBar').modal('hide');" />

				<div class="modal fade" id="progressBar" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">

								<h4 class="modal-title" align="center">Cargando</h4>
							</div>
							<div class="modal-body">

								<div class="progress progress-striped active">
									<div class="progress-bar progress-bar-success"
										role="progressbar" aria-valuenow="100" aria-valuemin="0"
										aria-valuemax="100" style="width: 100%"></div>
								</div>

							</div>

						</div>
					</div>
				</div>
				<!-- Barra de Progreso -->

					<h:form id="form">
						<p:messages id="msg" />

						<div class="panel panel-default" style="height:780px">

							<div class="panel-heading" align="center" 
								style="font-family: sans-serif; font-size: 150%;">Colecciones</div>

							<div class="panel-body">

								<div align="center">

									<p:commandButton id="btnCrear" value="Crear Coleccion"
										icon="ui-icon-plusthick"
										onclick="$('#dlgColeccion').modal('show');"
										styleClass="btn btn-primary" update=":formDlg:messages">
									</p:commandButton>

								</div>

								<p:spacer height="10px" />

								<p:scrollPanel style="height:500px" mode="native">
									<p:tree id="txtColecciones"
										value="#{coleccionesView.raizColecciones}" var="colecciones"
										selectionMode="single"
										style="margin: 0 auto;width:500px;width:auto;width:100%;height:auto"
										selection="#{coleccionesView.seleccionColecciones}">

										<p:treeNode icon="ui-icon-folder-collapsed">
											<h:outputText value="#{colecciones.nombre}" />
										</p:treeNode>
									</p:tree>
								</p:scrollPanel>

								<p:contextMenu for="txtColecciones">

									<p:menuitem value="Modificar"
										action="#{coleccionesView.modificar()}" icon="ui-icon-pencil"
										onclick="$('#dlgModificar').modal('show');"
										update=":formDlg2:messages, :formDlg2:txtNombreC2" />

									<p:menuitem value="Eliminar" icon="ui-icon-trash" ajax="false"
										action="#{coleccionesView.action_delete_master()}" />

								</p:contextMenu>

							</div>

						</div>

					</h:form>

					<h:form id="formDlg">

						<div class="modal fade" id="dlgColeccion" tabindex="-1"
							role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">

										<h4 class="modal-title" align="center">Crear Colección</h4>
									</div>
									<div class="modal-body">

										<p:messages id="messages" closable="true" />

										<p:inputText id="txtNombreC"
											requiredMessage="El nombre es requerido"
											styleClass="form-control"
											binding="#{coleccionesView.txtNombre}"
											placeholder="Nombre Colección" />

										<p:spacer height="10px" />

										<div align="center">
											<p:commandButton id="buttonCrear" value="Crear"
												styleClass="btn btn-primary"
												action="#{coleccionesView.action_create()}"
												update=":formDlg:messages" />
											<p:commandButton value="Cerrar" styleClass="btn btn-danger"
												update="formDlg, :form" />

										</div>

									</div>

								</div>
							</div>
						</div>
						<!-- Fin Dialogo Modificar -->

					</h:form>

					<h:form id="formDlg2">

						<div class="modal fade" id="dlgModificar" tabindex="-1"
							role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">

										<h4 class="modal-title" align="center">Modificar
											Colección</h4>
									</div>
									<div class="modal-body" id="panelModificar">

										<p:messages id="messages" autoUpdate="false" closable="true" />

										<p:outputLabel value="Nombre Colección:" />
										<p:inputText id="txtNombreC2" styleClass="form-control"
											binding="#{coleccionesView.txtNombreModificar}"
											placeholder="Nombre Colección" />

										<p:spacer height="10px" />

										<div align="center">
											<p:commandButton value="Modificar" class="btn btn-primary"
												action="#{coleccionesView.action_modify}" update="messages" />

											<p:commandButton value="Cerrar" class="btn btn-danger"
												onclick="PF('dlgModificar').hide();" update="formDlg2" />

										</div>

									</div>

								</div>
							</div>
						</div>
						<!-- Fin Dialogo Modificar -->


					</h:form>

		</div>
	<!-- ./wrapper -->
			</f:view>
		</ui:define>
	</ui:composition>
</h:body>

</html>